<template>
  <div>
    <template v-if="info.have_permission">
      <refresh ref="refresh" :upPullEvent="queryList" :upPullEnable="upPullEnable" :bottom="bottom">
        <div class="list-inner">
          <!-- table遮罩 -->
          <div class="table-loading" v-if="loadingLock"></div>
          <div class="lecture-info">
            <div class="topPlaceHolder"></div>
            <div class="introduct">
              <div class="lecturer-icon">
                <img :src="info.host_img" alt="" />
                <!-- 前端主动补充图片标签 -->
                <div class="icon-jpjs"></div>
              </div>
              <div class="lecturer-intro">
                <div class="intro-name">{{ info.host }}</div>
                <div class="intro-code">{{ `投顾编号：${info.pro_id}` }}</div>
                <div class="intro-span">
                  <span v-for="(item, index) in info.tags" :key="index">
                    {{ item }}
                  </span>
                </div>
              </div>
            </div>
            <div class="text-content">
              <div class="wrap" :class="expandAll ? 'checked' : ''">
                <div class="text" ref="load">
                  <label class="btn" @click="expand" v-if="needExport"
                    ><i>...</i><i class="blue">查看全部</i></label
                  >
                  <div class="text-inner">
                    {{ info.intro }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="reviews-scroll-body"
            ref="scrollBody"
            :style="'min-height:' + minHeight + 'px'"
          >
            <div class="reviews-container" v-if="dataList.length">
              <reviewsRow
                :reviews="item"
                :spDate="true"
                v-for="(item, index) in dataList"
                :key="index"
              ></reviewsRow>
            </div>
            <div v-else class="nodata">暂无直播信息</div>
          </div>
        </div>
      </refresh>
    </template>
    <!-- 未购买状态 -->
    <div v-else class="skeleton">
      <div class="skeletonHead"></div>
      <div class="buy-lock" @click="goPay">
        <div class="icon-lock mr-8"></div>
        <div>{{ `立即解锁${info.product_name}体系` }}</div>
      </div>
      <img src="../../assets/images/word-skeleton.png" alt="" />
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import query from '@/lib/query.js';
import refresh from '@/components/common/UpLoadRefresh.vue';
import reviewsRow from '@/components/ReviewsRow.vue';
import upPullMixin from '@/lib/upPullMixin.js';
export default {
  name: 'WordListPage',
  mixins: [upPullMixin],
  components: {
    refresh,
    reviewsRow,
  },
  data() {
    return {
      pageLoadMsg: {},
      dataList: [],
      expandAll: false,
      needExport: false,
      loadingLock: true,
    };
  },
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
  },
  mounted() {
    this.initPage();
  },
  methods: {
    initPage() {
      if (this.info.have_permission) {
        this.queryList();
        this.$nextTick(() => {
          this.getLoadMore();
        });
      }
    },
    getLoadMore() {
      const el = this.$refs.load;
      if (el.clientHeight < el.scrollHeight) {
        this.needExport = true;
      }
    },
    goPay() {
      // 跳转常规支付
      const url = `${_Global.url.payIndex}?sid=${this.info.sid}`;
      window.location.href = url;
    },
    expand() {
      this.expandAll = true;
    },
    clickClose() {
      this.$emit('close', '');
    },
    // 加载更多的逻辑
    queryList() {
      if (this.lock) {
        return;
      }
      this.lock = true;
      this.setPageStatus();
      const param = {
        ...this.pageLoadMsg,
      };
      query
        .getWordLiveList(param)
        .then(res => {
          this.lock = false;
          this.loadingLock = false;
          this.formatData(res.data);
        })
        .catch(err => {
          this.lock = false;
          this.mixinErrHandler(err, this.reload);
        });
    },
    formatData(data) {
      const { list, total, page_num, page_size } = data;
      if (total === 0) {
        //无数据
        this.pageLoadMsg.noData = true;
      } else if (page_size * page_num >= total) {
        // 已全部加载
        this.pageLoadMsg.noMore = true;
      } else {
        // donothing
      }
      // 正常数据处理
      if (page_num === 1) {
        this.dataList = this.formatImg(list);
      } else {
        this.dataList = this.dataList.concat(this.formatImg(list));
      }
      this.setLoadMoreStatus();
    },
    formatImg(data) {
      // 主要为了格式化图片数据
      const welfareList = [];
      for (let i = 0; i < data.length; i++) {
        const row = data[i];
        const link = _t.jsonPase(row.link);
        if (link) {
          row.img = link;
        }
        welfareList.push(row);
      }
      return welfareList;
    },
    // 分页处理
    setPageStatus() {
      if (this.pageLoadMsg.page_num) {
        this.pageLoadMsg.page_num++;
      } else {
        this.pageLoadMsg = {
          page_num: 1,
          page_size: 10,
          theme_id: this.info.theme_id,
        };
      }
    },
  },
};
</script>
<style lang="less" scoped>
.table-loading {
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 10;
  opacity: 0.8;
  left: 0;
  top: 0;
}
.text-content {
  padding: 0.16rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 0.08rem;
  margin-top: 0.32rem;
}
.live-list {
  padding: 0 0.32rem 0.32rem;
  .live-row {
    margin-top: 0.32rem;
    &:first-child {
      margin-top: 0;
    }
  }
}
.list-inner {
  .lecture-info {
    background-color: #ffffff;
    position: relative;
    padding: 0 0.32rem 0.32rem;
  }
}
.introduct {
  height: 1.56rem;
  display: flex;
  align-items: center;
  .lecturer-icon {
    width: 1.56rem;
    height: 1.56rem;
    margin-right: 0.2rem;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .icon-jpjs {
      position: absolute;
      bottom: -0.04rem;
      left: 0.14rem;
      width: 1.24rem;
      height: 0.32rem;
      background-image: url('../../assets/images/icon-jpjs.png');
      background-size: 100% 100%;
    }
  }
}
.lecturer-intro {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .intro-name {
    height: 0.5rem;
    line-height: 0.5rem;
    font-size: 0.36rem;
    color: #000000;
    font-weight: 500;
  }
  .intro-code {
    margin-top: 0.04rem;
    height: 0.28rem;
    line-height: 0.28rem;
    font-size: 0.2rem;
    color: rgba(0, 0, 0, 0.5);
    white-space: nowrap;
  }
  .intro-span {
    margin-top: 0.1rem;
    span {
      padding: 0 0.16rem;
      height: 0.4rem;
      line-height: 0.4rem;
      background: rgba(255, 36, 54, 0.1);
      border-radius: 0.08rem;
      font-size: 0.24rem;
      color: #ff2436;
      margin-right: 0.08rem;
    }
  }
}
.reviews-scroll-body {
  background: white;
  margin-top: 0.16rem;
}
.reviews-container {
  padding: 0.32rem 0.32rem 0.68rem;
}

.wrap {
  display: flex;
}
.checked {
  .text {
    max-height: none;
    .btn {
      display: none;
    }
  }
}
.text {
  max-height: 0.84rem;
  overflow: hidden;
  word-break: break-all;
  text-align: justify;
  line-height: 0.42rem;
  position: relative;
  font-size: 0.28rem;
  color: rgba(0, 0, 0, 0.5);
  &::before {
    content: '';
    float: right;
    width: 0; /*设置为0*/
    height: 100%;
    margin-bottom: -0.41rem;
  }
  .btn {
    float: right;
    clear: both;
    /* 本身的装饰样式*/
    height: 0.42rem;
    font-size: 0.28rem;
    line-height: 0.42rem;
    .blue {
      color: #4973f2;
    }
  }
}
.skeleton {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  img {
    width: 100%;
  }
}
</style>
